<template>
	<view class="container">
		<view class="tabs">
			<u-tabs :list="assembleList" name="title" :active-color="$setting.colorTheme()" :current="assembleIndex" @change="tabsChange"></u-tabs>
		</view>
		
		<view class="con">
			<image class="banner" :src="assembleProduct.detail.file_path"></image>
			
			<view class="countdown flex-center">
				<countdown ref='countdown' :config="countdownConfig"></countdown>
			</view>
			<view class="time">活动时间：{{assembleList[assembleIndex].start_time_text || ""}}至{{assembleList[assembleIndex].end_time_text || ""}}</view>
			
			<view class="product">
				<view class="product-item bg-fff flex" v-for="(item,index) in assembleProduct.list" :key="index" @click="jump('/pages/active/assemble/product?assemble_product_id='+item.assemble_product_id)">
					<image class="product-item-image" :src="item.product.file_path"></image>
					<view class="product-item-con flex-column-space-between">
						<view class="product-item-name">{{item.product.product_name}}</view>
						<view class="product-item-sales" v-if="item.teamwork_type==1">{{item.assemble_num || 0}}人成团 已拼{{item.join_num || 0}}人</view>
						<view class="product-item-sales" v-else-if="item.teamwork_type == 2">{{item.order_number || 0}}单成团 已拼{{item.total_sales || 0}}单</view>
						<view class="product-item-sales" v-else>{{item.product_number || 0}}件成团 已拼{{item.total_sales || 0}}件</view>
						<view class="flex-space-between">
							<view class="product-item-price"><text>￥</text>{{item.assemble_price}}</view>
							<b-u-button-theme width="148rpx" height="56rpx" size="26rpx" @click="jump('/pages/active/assemble/product?assemble_product_id='+item.assemble_product_id)">去拼团</b-u-button-theme>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				assembleList: [],
				assembleIndex: 0,
				assembleProduct: {},
				countdownConfig: {
					endstamp: '',
					startstamp: '',
				},
				share:{
					title: '',
					imageUrl:'',
            	},
			}
		},
		onLoad() {
			this.getHttp();
		},
		methods: {
			getConfigDataDetail(){
				let params = {
					page_type:'assemble'
				}
				uni.$u.api.getConfigDataDetail(params).then(res => {
					let Detail =  res.data
					this.share.title = Detail.content
					this.share.imageUrl = Detail.image
				})
			},
			jump(url) {
				uni.navigateTo({
					url: url
				})
			},
			tabsChange(e) {
				this.assembleIndex = e;
				this.getAssembleProduct();
			},
			getAssembleActive() {
				uni.$u.api.getAssembleActive().then(res => {
					this.assembleList = res.list;
					if(res.list.length > 0) {
						this.getAssembleProduct();
					}
				})
			},
			getAssembleProduct() {
				uni.$u.api.getAssembleProduct({
					assemble_activity_id: this.assembleList[this.assembleIndex].assemble_activity_id,
				}).then(res => {
					this.assembleProduct = res;
					this.countdownConfig.endstamp = this.assembleProduct.detail.end_time;
					this.countdownConfig.startstamp = this.assembleProduct.detail.start_time;
				})
			},
			getHttp() {
				this.getAssembleActive();
				this.getConfigDataDetail()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		
		.tabs {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 888;
			width: 100%;
		}
		
		.con {
			padding: 112rpx 30rpx 24rpx;
			
			.banner {
				width: 100%;
				height: 272rpx;
				border-radius: 16rpx;
			}
			
			.countdown {
				margin-top: 30rpx;
			}
			
			.time {
				margin-top: 22rpx;
				font-size: 24rpx;
				color: #999999;
				text-align: center;
			}
			
			.product {
				
				.product-item {
					margin-top: 24rpx;
					padding: 22rpx;
					border-radius: 16rpx;
					
					.product-item-image {
						width: 214rpx;
						height: 214rpx;
						border-radius: 16rpx;
					}
					
					.product-item-con {
						margin-left: 20rpx;
						flex: 1;
						
						.product-item-name {
							font-size: 28rpx;
							color: #111111;
						}
						
						.product-item-sales {
							font-size: 24rpx;
							color: #E80D0D;
						}
						
						.product-item-price {
							font-size: 36rpx;
							color: #E80D0D;
							font-weight: bold;
							
							text {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
